<template>
  <div>
    <div>
      <el-form label-width="120px" size="mini">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出账机构">
               <el-input
                size="small"
               v-model="org.orgName"></el-input>
              <!-- <el-autocomplete
                size="small"
                v-model="org.orgName"
                value-key="branchName"
                :trigger-on-focus="false"
                :fetch-suggestions="suggestion"
                placeholder="请输入机构查询可选用户"
                @select="handleSelect"
              ></el-autocomplete> -->
              <!-- <el-select v-model="value" placeholder="请输入" size="mini">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="t-pl20 clearfix">
              <div class="fr">
                <el-button
                  type="primary"
                  size="mini"
                  class="search-btn"
                  @click="serch"
                  >查询</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-content">
      <el-table :data="tableData" tooltip-effect="dark" border>
        <el-table-column
          prop="zhihangming"
          align="center"
          label="出账机构名称"
        ></el-table-column>
        <el-table-column
          prop="dianhua"
          align="center"
          label="联系电话"
        ></el-table-column>
        <el-table-column
          prop="dizhi"
          align="center"
          label="联系地址"
        ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="tableQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      org: {
        orgName: "",
        orgId: "",
      },
      tableData: [{}],
      // 页码初始化数据
      total: 0, //总条目数
      tableQuery: {
        size: 10, //每页现实的条数
        page: 1, //当前显示那页
      },
      value: "",
      options: [
        {
          value: "1",
          label: "成功",
        },
        {
          value: "2",
          label: "失败",
        },
      ],
    };
  },

  methods: {
    //页码显示条目变化
    handleSizeChange(val) {
      this.tableQuery.size = val;
      this.tableQuery.page = 0;
      this.serch();
    },
    // 页码跳转
    handleCurrentChange(val) {
      this.tableQuery.page = val;
      this.serch();
    },
    getList() {
      console.log(this.row)
      this.tableData = []
      let data = {
        caseCode: this.row.caseCode,
        customerId: this.row.customerId,
        // statorgId: this.row.statorgId || this.$store.getters.statorgId,
        statorgId: this.org.orgId || this.row.statorgId ,
        queryFlag: this.row.queryFlag,
        putoutNo: this.row.putoutNo,
        statorgName:this.org.orgName,
        size: this.tableQuery.size,
        page: this.tableQuery.page - 1,
      };
      this.$axios
        .get("/CC/taskCenter/caseInfo/showBranchList", {
          params: data,
        })
        .then((res) => {
          console.log(res)
          this.tableData=res.data.content;
          this.total = res.data.totalElements || 0;
        });
        console.log(this.tableData)
    },
    suggestion(str, cb) {
      // console.log(str)
      // console.log(cb)
      this.$axios
        .get("/CC/cmTeamUser/queryBranchByName", {
          params: {
            branchName: str,
          },
        })
        .then((res) => {
          for(let i of res.data) {
            i.value = i.branchName
          }
          console.log(res.data)
          // let arr = res.data
          // for(let val of arr) {
          //   this.org.orgId = val.branchId
          // }
          let list = res.data
          cb(list);
          this.handleSelect(res.data)
        });
    },
    handleSelect(val) {
      this.org.orgId = val.branchId;
      this.org.orgName = val.branchName;
      // console.log(this.org)

    },
    serch(){
     this.tableData = []
      let data = {
        caseCode: "",
        customerId: "",
        // statorgId: this.row.statorgId || this.$store.getters.statorgId,
        statorgId: "" ,
        queryFlag: "",
        putoutNo: "",
        statorgName:this.org.orgName,
        size: this.tableQuery.size,
        page: this.tableQuery.page - 1,
      };
      console.log(data)
      this.$axios
        .get("/CC/taskCenter/caseInfo/showBranchList", {
          params: data,
        })
        .then((res) => {
          console.log(res)
          this.tableData=res.data.content;
           this.total = res.data.totalElements || 0;
        });
    }
  },
  created() {
   this.getList();
  },
};
</script>

<style lang="scss" scoped>
.case-detail {
  padding: 10px 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__item {
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  color: #ffffff;
  background-color: #d10a14;
  padding: 0px;
  line-height: 30px;
  border-radius: 15px;
}
</style>
